import React, { Component } from 'react';
import { classify_data } from '../apis/api'
import Header from '../components/MyHeader/header'
import { Tag,SearchBar } from 'antd-mobile'
import '../styles/categorySearch.scss'
class categorySearch extends Component {

    state = {
        data: [],
        title:''
    }
    toDetails = (goodid) => {
        this.props.history.push({pathname:'/details',state:{goodid}})
    }
    toSearch=() =>{
        this.props.history.push({pathname:"/search"})
    }
    componentDidMount() {
        let { id, title } = this.props.location.state
        console.log(title);
        this.setState({title})
        classify_data({ id }).then((res) => {
            this.setState({
                data: res.data.list,
                
            }, () => {
                console.log(this.state.data);
            })


        })


    }
    render() {
        return (
            <div className='categorySearch'>
                <div className='headers'>
                    <Header title={this.state.title} />
                    <SearchBar placeholder='搜索店铺内商品' onFocus={this.toSearch} />
                </div>

                <div className='list'>
                    {
                        this.state.data.map((item, index) => {
                            return (
                                <div className='cart' key={index} onClick={()=>{this.toDetails(item.id)}}>
                                    <img src={item.pic} alt="" />
                                    <h3>
                                        <Tag color='#ff6430' fill='outline'>
                                        {item.activityTags}
                                        </Tag>
                                        {item.name}
                                    </h3>
                                    <span>{item.salesPrice.name}</span>
                                    <span>{item.salesPrice.value}</span>
                                   
                                </div>
                            )
                        })
                    }

                </div>
            </div>
        );
    }
}

export default categorySearch;